/**
 *  模型过程监控
 *  Created by dinghh on 2018/7/13.
 */
'use strict';
angular.module("MetronicApp").directive('modelMonitor', function () {
    return {
        scope: {
            id: "@",
            data: "="
        },
        restrict: 'EA',
        template: '<div style="width: 800px;height: 400px"></div>',
        replace: true,
        link: function ($scope, element, attrs, controller) {
            function getOption(data) {
                var option = {
                    title:{
                        text:'模型小时处理量',
                        left:'50%',
                        top:'5%',
                        textAlign:'center',
                        textStyle:{//标题内容的样式
                            fontSize:15,//主题文字字体大小，默认为18px
                            color: '#4169E1'

                        }
                    },
                    legend: {
                        data:['数据量'],
                        left:'center',
                        bottom: '3%'
                    },
                    xAxis: {
                        type: 'category',
                        data: [1, 2, 3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
                    },
                    yAxis: {
                        type: 'value',
                        axisTick: {         //去掉刻度线
                            show: false
                        }

                    },
                    series: [{
                        name: '数据量',
                        data: [280, 360, 378, 468, 530, 520, 610,650, 550, 720, 720, 810, 899, 1000,820, 932, 901, 934, 1000, 1250, 1270,820, 932, 901],
                        type: 'line',
                        smooth: true,
                        itemStyle:{
                            normal:{
                                color: '#87CEFA',          //节点颜色
                                lineStyle:{               //线条颜色
                                    color: '#87CEFA'
                                }
                            }
                        }
                    }]
                };
                return option;
            }


            var myChart = echarts.init(document.getElementById($scope.id), 'macarons');
            myChart.setOption(getOption($scope.data));

            $scope.$watch('data', function (newVal, oldVal) {
                myChart.setOption(getOption(newVal));
            });
        }
    };
});
